<template>
  <div id="app">
    <div>
      <div><my-header></my-header></div>
      <transition mode="out-in" name="fade-transform">
        <router-view></router-view>
      </transition>
      <div><my-footer></my-footer></div>
    </div>
  </div>
</template>

<script>
  import MyHeader from "@/views/header";
  import MyFooter from "@/views/footer";
  export default {
    name: "app",
    components: { MyHeader, MyFooter },
  };
</script>

<style lang="scss">
  #app {
    background-color: $background;
    color: #fff;
    // overflow-x: hidden;
  }
  .orderTest-container {
    padding: 0 170px;
    position: relative;
  }
  // 进度条背景色
  .el-progress-bar__outer {
    background-color: #1b2044 !important;
  }
  // 大标题
  .bigTitle {
    color: #2c376d;
    font-size: 60px;
    font-weight: 600;
    text-align: right;
    margin-bottom: 100px;
    margin-top: 150px;
    position: relative;
    z-index: 2;
    &::before {
      content: "";
      position: absolute;
      top: -50px;
      right: -20px;
      width: 180px;
      height: 120px;
      z-index: -1;
      background-color: #12152f;
    }
  }
  @media screen and (max-width: 1920px) {
    .orderTest-container {
      padding: 0 150px;
    }
  }

  @media screen and (max-width: 1440px) {
    .bigTitle {
      font-size: 50px;
    }
  }
  @media screen and (max-width: 1200px) {
    .orderTest-container {
      padding: 0 120px;
    }
  }
  @media screen and (max-width: 990px) {
    .orderTest-container {
      padding: 0 70px;
    }
  }
  @media screen and (max-width: 798px) {
    .orderTest-container {
      padding: 0 40px;
    }
    .bigTitle {
      font-size: 45px;
    }
    .tit {
      font-size: 28px;
    }
  }
  @media screen and (max-width: 414px) {
    .orderTest-container {
      padding: 0 30px;
    }
    .bigTitle {
      font-size: 35px;
    }
    .tit {
      font-size: 24px;
    }
  }

  .fade-transform-leave-active,
  .fade-transform-enter-active {
    transition: 0.3s;
  }

  .fade-transform-enter {
    opacity: 0;
    transform: translateX(-30px);
  }

  .fade-transform-leave-to {
    opacity: 0;
    transform: translateX(30px);
  }

  // 进度条css

  #nprogress .bar {
    // background: rgb(0, 0, 0) !important; //自定义颜色
  }
  code {
  }
</style>
